<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 基本表单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="files/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="files/css/font-awesome.min.css" rel="stylesheet">
    <link href="files/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="files/css/animate.css" rel="stylesheet">
    <link href="files/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="files/js/vue.js"></script>
    <style>
        html {
            width: 100%;
        }
        .gray-bg {
            width: 100%;
        }
        #app {
            height: 100%;
            width: 100%;
        }
        .wrapper {
            width: 100%;
        }
        .searchInput {
            height: 34px;
        }
        .form-horizontal {
            width: 100%;
        }
        .ibox-content {
            width: 100%;
        }
        .copyBtn {
            float: right;
            height: 100%;
            line-height: 1;
            padding: 0 12px;
        }
        .ibox-title h5 {
            width: 80%;
            white-space: nowrap;
        }
        .ibox-title h5 input {
            border: none;
            background: none;
            width: 260px;
            font-weight: 500;
            display: inline-block;
        }
        .searchList {
            position: absolute;
            left: 0;
            top: 105%;
            right: 0;
            padding: 6px 0;
            z-index: 1;
            box-shadow: 0 0 4px rgba(0, 0, 0, .4);
            border-radius: 4px;
            background-color: #fff;
            list-style: none;
        }
        .searchList li {
            list-style: none;
            padding: 5px 12px;
            cursor: pointer;
        }
        .searchList li:hover {
            background-color: #f6f6f6;
        }
        .searchList li:after {
            display:block;
            clear:both;
            content:"";
            visibility:hidden;
            height:0
        }
        .searchList li .name {
            float: left;
        }
        .searchList li .username {
            float: right;
        }
        .ibox.float-e-margins .ibox-title {
            padding-top: 0;
            padding-bottom: 0;
        }
        .ibox.float-e-margins .ibox-title h5 {
            height: 40px;
            width: 100%;
            line-height: 40px;
        }
        .level {
            margin-left: 10px;
            display: inline-block;
            width: 40%;
            height: 30px;
            margin-top: 5px;
            padding: 0;
            padding-left: 10px;
        }
        .keyInput {
            display: inline-block;
            height: 24px;
            margin-top: 8px;
            padding-left: 10px;
            width: 60%;
            border-bottom: 1px solid #999!important;
        }
        @media screen and ( max-width: 400px ) {
            .copyBtn {
                display: none;
            }
        }
    </style>
</head>

<body class="gray-bg">
    <div id="app" @click="searchList='';keywords=''">
        <div class="wrapper wrapper-content">
            <form action="javascript:;" class="form-horizontal" style="margin-bottom: 20px;">
                <div class="input-group col-sm-6 col-sm-offset-3 col-xs-12">
                    <input type="text" class="form-control searchInput" v-model="keywords"> 
                    <span class="input-group-btn"> 
                        <button type="button" class="btn btn-primary" @click.stop="search()">搜索</button>
                    </span>
                    <ul class="searchList" v-if="searchList">
                        <li v-for="item in searchList" @click.stop="selStore(item)">
                            <span v-text="item.name" class="name"></span>
                            <span v-text="item.username" class="username"></span>
                        </li>
                    </ul>
                </div>
            </form>
        
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>注册时间：<input readonly="" :value="curDetailData.add_time" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺地址：<input readonly="" :value="curDetailData.addr" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺名称：<input readonly="" :value="curDetailData.name" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺类型：<input readonly="" :value="curDetailData.type_name" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>老板帐号：<input readonly="" :value="curDetailData.username" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>到期时间：<input v-model="curDetailData.expire_time" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>&nbsp;&nbsp;&nbsp;门店号：<input class="keyInput" v-model="curDetailData.mch_id" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺密钥：<input class="keyInput" v-model="curDetailData.key" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺等级：
                                    <select class="form-control level" name="" id="" v-model="curDetailData.level">
                                        <option value="ONE">一级</option>
                                        <option value="TWO">二级</option>
                                        <option value="THREE">三级</option>
                                    </select>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>店铺等级：
                                    <select class="form-control level" name="" id="" v-model="curDetailData.level">
                                        <option value="ONE">一级</option>
                                        <option value="TWO">二级</option>
                                        <option value="THREE">三级</option>
                                    </select>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div> -->
                <div class="row">
                    <div class="col-sm-12" style="text-align: right;">
                        <button type="button" class="btn btn-primary" style="width: 100px;" @click="save">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    

    <!-- 全局js -->
    <script src="files/js/jquery.min.js?v=2.1.4"></script>
    <script src="files/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="files/js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="files/js/plugins/iCheck/icheck.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {                
                curDetailData: {},
                keywords: '',

                searchList: '', // 搜索出来的列表
            },
            methods: {
                // 搜索
                search: function () {
                    if ( !this.keywords ) {
                        this.getData();
                        return;
                    }
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "searchKey?keywords="+that.keywords,
                        async: true,
                        success: function ( res ) {
                            that.searchList = res.data;
                        },
                        error: function (x, e) {

                        }
                    });
                },
                selStore: function ( item ) {
                    this.curDetailData = item;
                    this.curDetailData.add_time = new Date(this.curDetailData.add_time).Format('yyyy/MM/dd');
                    this.curDetailData.expire_time = new Date(this.curDetailData.expire_time).Format('yyyy/MM/dd');
                    this.searchList = '';
                    this.keywords = '';
                },
                save: function () {
                    if ( !this.curDetailData.id ) {
                        alert('请选择店铺')
                        return;
                    }

                    //this.curDetailData.key = this.curDetailData.key.replace(/\s+/g, "");
                    this.curDetailData.mch_id = this.curDetailData.mch_id.replace(/\s+/g, "");
                    let that = this;
                    $.ajax({
                        type: "PUT",
                        url: "changeLevel",
                        data: {
                            "id": that.curDetailData.id,
                            "level": that.curDetailData.level,
                            "mch_id": that.curDetailData.mch_id,
                            "expire_time": new Date(that.curDetailData.expire_time).Format('yyyy-MM-dd'),
                            "key": that.curDetailData.key
                        },
                        async: true,
                        success: function ( res ) {
                            alert('修改成功')
                        },
                        error: function (x, e) {

                        }
                    });
                }
            },
            created: function () {
                Date.prototype.Format = function (fmt) { //author: meizz 
                    var o = {
                        "M+": this.getMonth() + 1, //月份 
                        "d+": this.getDate(), //日 
                        "h+": this.getHours(), //小时 
                        "m+": this.getMinutes(), //分 
                        "s+": this.getSeconds(), //秒 
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                        "S": this.getMilliseconds() //毫秒 
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }
            },
            mounted: function () {
                $(document).ready(function () {
                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });
                });
            }
        })
    </script>
</body>

</html>

    